<template>
	<view :style="objColor">
		<view class="site_filtering">
			<view class="pop_top">
				<view class="content_list">
					<scroll-view scroll-y="true" class="scroll_view_style">
						<!-- 推荐站点 -->
						<view class="type">
							<view class="type_title">{{ recommendationList.name }}</view>
							<view class="type_list">
								<view
									:class="item.isShow ? 'type_itme_sel' : 'type_itme'"
									@tap="checkRecommendation(item, index)"
									:data-key="item.key"
									v-for="(item, index) in recommendationList.list"
									:key="index"
								>
									{{ item.value }}
								</view>
							</view>
						</view>

						<!-- 充电速率 -->
						<view class="type">
							<view class="type_title">{{ chargingModeList.name }}</view>
							<view class="type_list">
								<view
									:class="item.isShow ? 'type_itme_sel' : 'type_itme'"
									@tap="checkChargingMode(item, index)"
									:data-key="item.key"
									v-for="(item, index) in chargingModeList.list"
									:key="index"
								>
									{{ item.value }}
								</view>
							</view>
						</view>

						<!-- 距离范围 -->
						<view class="type">
							<view class="type_title">{{ distanceList.name }}</view>
							<view class="type_list">
								<view
									:class="memberQueryPreferenceDto.distance == item.key ? 'type_itme_sel' : 'type_itme'"
									@tap="checkDistance"
									:data-key="item.key"
									v-for="(item, index) in distanceList.list"
									:key="index"
								>
									{{ item.value }}
								</view>
							</view>
						</view>

						<!-- 停车费用 -->
						<view class="type">
							<view class="type_title">{{ parkFeeEnum.name }}</view>
							<view class="type_list">
								<view
									:class="item.isShow ? 'type_itme_sel' : 'type_itme'"
									@tap="checkParkingFeeType(item, index)"
									:data-key="item.key"
									v-for="(item, index) in parkFeeEnum.list"
									:key="index"
								>
									{{ item.value }}
								</view>
							</view>
						</view>
						
						<!-- 配套设施 -->
						<view class="type">
							<view class="type_title">{{ serviceFEnum.name }}</view>
							<view class="type_list">
								<view
									:class="item.isShow ? 'type_itme_sel' : 'type_itme'"
									@tap="checkServiceFacilities(item, index)"
									:data-key="item.key"
									v-for="(item, index) in serviceFEnum.list"
									:key="index"
								>
									{{ item.value }}
								</view>
							</view>
						</view>


						<!-- 运营商 -->
						<!-- <view class="type">
							<view class="type_title">{{ findAllTreeEnum.name }}</view>
							<view class="type_list">
								<view
									:class="item.isShow ? 'type_itme_sel' : 'type_itme'"
									@tap="checkFindAllTree(item, index)"
									:data-key="item.key"
									v-for="(item, index) in findAllTreeEnum.list"
									:key="index"
								>
									{{ item.name }}
								</view>
							</view>
						</view> -->

						<!-- 标签循环 -->
						<view class="tag_view">
							<view class="type" v-for="(items, indexs) in getAllCategoryTagDTOList" :key="indexs">
								<view class="type_title">{{ items.name }}</view>
								<view class="type_list">
									<view
										:class="item.isShow ? 'type_itme_sel' : 'type_itme'"
										@tap="checkTags(item, index)"
										:data-key="item.key"
										v-for="(item, index) in items.tagDetail"
										:key="index"
									>
										{{ item.name }}
									</view>
								</view>
							</view>
						</view>

					</scroll-view>
				</view>
			</view>

			<view class="type_btn">
				<view class="btn1" @tap="canalPreference">重置</view>
				<view class="btn2" @tap="enterPreference">确认</view>
			</view>
		</view>

	</view>
</template>

<script>
	var app = getApp();
	import { findAllTree, getAllCategoryDTO, } from '@/api/mobileUpdate';

	export default {
		components: {},
		data() {
			return {
				findAllTreeEnum: {
				    name: '运营商',
				    list: []
				},

				//标签对象 接口取
				getAllCategoryTagDTOList:{},

				recommendationList: {
				    name: '推荐电站',
				    list: [
				        {
				            value: '优选站点',
				            key: false,
							isShow: false,
				        },
				        {
				            value: '折扣站点',
				            key: false,
							isShow: false,
				        }
				    ]
				},

				chargingModeList: {
				    name: '充电速率',
				    list: [
				        {
				            value: '超充',
				            key: 3,
							isShow: false,
				        },
				        {
				            value: '快充',
				            key: 2,
							isShow: false,
				        },
				        {
				            value: '慢充',
				            key: 1,
							isShow: false,
				        }
				    ]
				},

				distanceList: {
				    name: '距离范围',
				    list: [
				        {
				            value: '3KM',
				            key: 3
				        },
				        {
				            value: '5KM',
				            key: 5
				        },
				        {
				            value: '10KM',
				            key: 10
				        },
				        {
				            value: '30KM',
				            key: 30
				        },
				        {
				            value: '50KM',
				            key: 50
				        },
				        {
				            value: '100KM',
				            key: 100
				        }
				    ]
				},

				parkFeeEnum: {
				    name: '停车费用',
				    list: [
						{
							key: 1,
							value: '充电免费',
							isShow: false,
						},
						{
							key: 2,
							value: '充电减免',
							isShow: false,
						},
						{
							key: 3,
							value: '停车收费',
							isShow: false,
						},
						{
							key: 4,
							value: '其他免停',
							isShow: false,
						},
						{
							key: 5,
							value: '未知',
							isShow: false,
						}
				    ]
				},

				serviceFEnum: {
				    name: '配套设施',
				    list: [
						{ 
							key: 1, 
							value: '按摩室',
							isShow: false,
						},
						{ 
							key: 2, 
							value: '便利店',
							isShow: false, 
						},
						{ 
							key: 3, 
							value: '厕所',
							isShow: false,
						},
						{ 
							key: 4, 
							value: '空调休息室',
							isShow: false,
						},
						{ 	key: 5, 
							value: '快餐',
							isShow: false,
						},
						{ 	key: 6, 
							value: '免费WiFi',
							isShow: false,
						},
						{ 	key: 7, 
							value: '洗车',
							isShow: false,
						},
						{ 	key: 8, 
							value: '饮用水',
							isShow: false,
						},
						{ 	key: 9, 
							value: '自动售货机',
							isShow: false,
						}
				    ]
				},

				// 筛选条件
				memberQueryPreferenceDto: {
				    distance: null,
					tagIds: [],
				},

			};
		},
		onLoad(option) {
			console.log("option..",option)
			
		},
		// 生命周期函数--监听页面显示
		onShow() {
			// 运营商先不做
			// this.findAllTreeData()

			// 获取标签类
			this.getAllCategoryDTOData()

			this.initDataBase()
		},
		onHide() {
			
		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {
			
		},
		methods: {
			// 设置默认勾选过的类
			initDataBase() {
				console.log("获取并设置默认的initDataBase........")
				let siteFiltering = uni.getStorageSync('siteFiltering');
                let siteLabelSelection = uni.getStorageSync('siteLabelSelection');
                let getMemberQueryPreferenceDto = {
                    ...siteFiltering,
                    ...siteLabelSelection
                }
				if(siteFiltering.gunType && siteLabelSelection.gunType){
					getMemberQueryPreferenceDto.gunType = [...siteFiltering.gunType, ...siteLabelSelection.gunType]
				}
				if(siteFiltering.serviceFacilities && siteLabelSelection.serviceFacilities){
					getMemberQueryPreferenceDto.serviceFacilities = [...siteFiltering.serviceFacilities, ...siteLabelSelection.serviceFacilities]
				}

				console.log("getMemberQueryPreferenceDto==>siteFiltering",getMemberQueryPreferenceDto)

				// let getMemberQueryPreferenceDto = uni.getStorageSync('siteFiltering') 

				this.recommendationList.list[0].isShow = getMemberQueryPreferenceDto.isFeatured
				this.recommendationList.list[1].isShow = getMemberQueryPreferenceDto.isDiscount

				this.chargingModeList.list.map(item=>{
					if(getMemberQueryPreferenceDto.gunType){
						if(getMemberQueryPreferenceDto.gunType.includes(item.key)){
							item.isShow = true
						}
					}
				})

				this.memberQueryPreferenceDto.distance = getMemberQueryPreferenceDto.distance

				this.parkFeeEnum.list.map(item=>{
					if(getMemberQueryPreferenceDto.parkingFeeType){
						if(getMemberQueryPreferenceDto.parkingFeeType.includes(item.key)){
							item.isShow = true
						}
					}
					
				})

				this.serviceFEnum.list.map(item=>{
					if(getMemberQueryPreferenceDto.serviceFacilities){
						if(getMemberQueryPreferenceDto.serviceFacilities.includes(item.key)){
							item.isShow = true
						}
					}
				})

				// this.findAllTreeEnum.list.map(item=>{
				// 	if(getMemberQueryPreferenceDto.serviceFacilities){
				// 		if(getMemberQueryPreferenceDto.serviceFacilities.includes(item.key)){
				// 			item.isShow = true
				// 		}
				// 	}
				// })

				
			},
			//选择推荐电站
			checkRecommendation(item) {
				item.isShow = !item.isShow;
			},
			//选择充电速率
			checkChargingMode(item) {
				item.isShow = !item.isShow;
			},

			//选择距离范围
			checkDistance: function (e) {
			    var key = e.currentTarget.dataset.key;
				this.memberQueryPreferenceDto.distance = key
			},

			//选择停车费用
			checkParkingFeeType(item) {
				item.isShow = !item.isShow;
			},
			//选择配套设施
			checkServiceFacilities(item) {
				item.isShow = !item.isShow;
			},

			//获取运营商
			findAllTreeData(){
				findAllTree().then(res=>{
                    console.log(res,'运营商...')
					if(res.code == 0){
						const findAllTreeEnumData = res.data.map(item => {
                            return {
                                ...item,
                                isShow: false,
                            }
                        })
						this.findAllTreeEnum.list = findAllTreeEnumData
					}
				
                })
			},
			checkFindAllTree(item) {
				item.isShow = !item.isShow;
			},

			//获取标签
			getAllCategoryDTOData(){
				getAllCategoryDTO().then(res=>{
                    console.log(res,'标签...')
                    if(res.code == 0){
						// this.getAllCategoryTagDTOList = res.data
						res.data.forEach(items => {
							items.tagDetail.forEach(item=>{
								item.isShow = false
							})
						});
						this.getAllCategoryTagDTOList = res.data
						console.log(this.getAllCategoryTagDTOList,'getAllCategoryTagDTOList...')


						// 设置默认勾选过的标签;
						let getMemberQueryPreferenceDto = uni.getStorageSync('siteFiltering')
						this.getAllCategoryTagDTOList.forEach(items => {
							console.log(items,'itemmmmss')
							items.tagDetail.map(item=>{
								if(getMemberQueryPreferenceDto.tagIds){
									if(getMemberQueryPreferenceDto.tagIds.includes(item.id)){
										item.isShow = true
									}
								}
							})
						})
				
					}
                })
			},

			checkTags(item) {
				// console.log(item,'iiii')
				item.isShow = !item.isShow;
				this.checkTagsIds(item.id, item.isShow)
			},
			checkTagsIds(idNum, showStatus){
				showStatus ? this.memberQueryPreferenceDto.tagIds.push(idNum) : this.memberQueryPreferenceDto.tagIds.splice(this.memberQueryPreferenceDto.tagIds.indexOf(idNum), 1)
				// console.log(this.memberQueryPreferenceDto.tagIds)
			},
			clearTagsIds(){
				return this.getAllCategoryTagDTOList.forEach(items => {
					items.tagDetail.forEach(item=>{
						item.isShow = false
					})
				})
			},

			//清除偏好
			canalPreference() {
				this.memberQueryPreferenceDto = {
					isFeatured: this.recommendationList.list[0].isShow = false,
					isDiscount: this.recommendationList.list[1].isShow = false,
					gunType: this.chargingModeList.list.map((v)=> v.isShow = false),
					distance: null,
					parkingFeeType: this.parkFeeEnum.list.map((v)=> v.isShow = false),
					serviceFacilities: this.serviceFEnum.list.map((v)=> v.isShow = false),

					// findAllTreeEnum.list

					tagIds: [],
				}

				this.clearTagsIds()
			},

			//确定偏好
			enterPreference() {
				uni.removeStorageSync('siteLabelSelection');
				
				//传递出去给接口用
				this.memberQueryPreferenceDto = {
					isFeatured: this.recommendationList.list[0].isShow ? true : false,
					isDiscount: this.recommendationList.list[1].isShow ? true : false,
					gunType: this.chargingModeList.list.filter(s=> s.isShow).map(v=> v.key),
					distance: this.memberQueryPreferenceDto.distance,
					parkingFeeType: this.parkFeeEnum.list.filter(s=> s.isShow).map(v=> v.key),
					serviceFacilities: this.serviceFEnum.list.filter(s=> s.isShow).map(v=> v.key),
					
					tagIds: this.memberQueryPreferenceDto.tagIds,
				}
				console.log(this.memberQueryPreferenceDto,'memberQueryPreferenceDto.....')

				
				// 关闭当前页面并回传数据
				uni.setStorageSync('siteFiltering', this.memberQueryPreferenceDto);
				uni.navigateBack({
					delta: 1,
					success: ()=> {
						// uni.$emit('siteFiltering', this.memberQueryPreferenceDto);
						// uni.setStorageSync('siteFiltering', this.memberQueryPreferenceDto);
					}
				})

			},


		}
	};
</script>
<style lang="less" scoped>
	@import url("./siteFiltering.less");
</style>
